<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import axios from "axios";
import { MessagePlugin, TreeProps, InputProps } from "tdesign-vue-next";
import flv from "flv.js";

function normalizeFilePath(filePath: string) {
  // 要去除的前缀
  const prefixToRemove = "E://BaiduNetdiskDownload\\";

  // 去除前缀
  let normalizedPath = filePath.replace(prefixToRemove, "");

  // 将所有的反斜杠替换为斜杠
  normalizedPath = normalizedPath.replace(/\\/g, "/");

  return normalizedPath;
}

function transformToTree(items: any) {
  return items.map((item: any) => {
    const node: any = {
      label: "",
      value: "",
      type: "",
    };

    if (item.File) {
      node.label = item.File.name;
      node.value = normalizeFilePath(item.File.path);
      node.type = "file";
    } else if (item.Directory && item.Directory.contents) {
      node.label = item.Directory.name;
      node.value = normalizeFilePath(item.Directory.path);
      node.type = "dir";
      node.children = transformToTree(item.Directory.contents);
    }

    return node;
  });
}
const player = ref();

const pause = () => {
  player.value.pause();
};
// async function greet() {
//   if (flv.isSupported()) {
//     player.value = flv.createPlayer({
//       type: "video/mp4",
//       url: allChecked.value[0],
//     });
//   }

//   const video = document.getElementById("myVideo");
//   player.value.attachMediaElement(video);
//   player.value.load();
//   pause();
// }

// 选择视频
const onChange = (value: string) => {
  if (player.value) {
    player.value.unload();
    player.value.detachMediaElement();
    player.value.destroy();
    player.value = null;
  }

  player.value = flv.createPlayer({
    type: "video/mp4",
    url: 'https://870403pu13.vicp.fun/' + value,
  });
  const video = document.getElementById("myVideo");
  player.value.attachMediaElement(video);
  player.value.load();
  pause();
};



const tree = ref();
const treeRef = ref();
const allChecked = ref([]);

const loading = ref(false);

const onClick = (context: any) => {
  setTimeout(() => {
    if (context.node.data.type === "file") {
      allChecked.value = [];
      allChecked.value.push(context.node.value);
    }
  }, 1);
};

onMounted(() => {
  loading.value = true;
  axios
    .get("https://870403pu13.vicp.fun/api/video")
    .then((res) => {
      loading.value = false;
      if (res.status === 200) {
        tree.value = transformToTree(res.data.Directory.contents);
        console.log(tree.value);
      }
    })
    .catch((err) => {
      loading.value = false;
      MessagePlugin.error("数据加载失败");
    });
});

const demo1Text = ref("");
const demo1Filter = ref<TreeProps["filter"]>(null);
const demo1Input: InputProps["onChange"] = (state) => {
  if (demo1Text.value) {
    demo1Filter.value = (node) => {
      const rs = (node.data.label as string).indexOf(demo1Text.value) >= 0;
      return rs;
    };
  } else {
    demo1Filter.value = null;
  }
};

watch(allChecked, () => {
  if (allChecked.value[0]) {
    onChange(allChecked.value[0]);
  }
});
</script>

<template>
  <div class="content">
    <div class="tree-ajdlwkj">
      <p v-show="loading">数据加载中...</p>
      <t-space>
        <t-input-adornment prepend="filter:">
          <t-input
            v-model="demo1Text"
            style="width: 360px"
            @change="demo1Input"
          />
        </t-input-adornment>
      </t-space>
      <div class="tree-conter">
        <t-tree
          ref="treeRef"
          :data="tree"
          hover
          checkable
          checkStrictly
          line
          v-model="allChecked"
          expandParent
          expandOnClickNode
          @click="onClick"
          valueMode="all"
          :filter="demo1Filter"
        ></t-tree>
      </div>
    </div>

    <div class="video">
      <video id="myVideo" controls autoplay muted></video>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  display: flex;
  height: calc(100vh - 220px);
  .tree-ajdlwkj {
    height: 100%;
    display: flex;
    flex-direction: column;
    .tree-conter {
      flex: 1;
      height: 0;
      overflow-x: auto;
    }
    .tree-conter::-webkit-scrollbar {
      width: 0;
    }
  }

  .video {
    flex: 1;
    background-color: #333;
    margin-left: 24px;
    border-radius: 8px;
    overflow: hidden;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
